<script setup lang="ts">
import {ref,computed} from "vue"
import SvgIcon from "@/components/SvgIcon/index.vue";
import { copy } from "@/utils/Dom";

const iconName = [
  { name: "api" },
  { name: "assets" },
  { name: "captcha" },
  { name: "cart" },
  { name: "cascader" },
  { name: "client" },
  { name: "close_all" },
  { name: "close_left" },
  { name: "close_other" },
  { name: "close_right" },
  { name: "close" },
  { name: "company" },
  { name: "dict" },
  { name: "document" },
  { name: "download" },
  { name: "drag" },
  { name: "edit" },
  { name: "exit-fullscreen" },
  { name: "eye-open" },
  { name: "eye" },
  { name: "font" },
  { name: "fullscreen" },
  { name: "gift" },
  { name: "gitee" },
  { name: "github" },
  { name: "homepage" },
  { name: "icon" },
  { name: "ip" },
  { name: "language" },
  { name: "link" },
  { name: "login" },
  { name: "menu" },
  { name: "message" },
  { name: "money" },
  { name: "monitor" },
  { name: "order" },
  { name: "password" },
  { name: "peoples" },
  { name: "project" },
  { name: "publish" },
  { name: "redis" },
  { name: "refresh" },
  { name: "regster" },
  { name: "role" },
  { name: "security" },
  { name: "shop" },
  { name: "shrink" },
  { name: "size" },
  { name: "system" },
  { name: "table" },
  { name: "todolist" },
  { name: "tree" },
  { name: "user" },
  { name: "visit" },
  { name: "wechat" },
  { name: "weibo" },
  { name: "weixin" },
  { name: "wifi" },
  { name: "youtube" },
];
const inputinco = ref<string>("");
const showiconName = computed(() =>
iconName.filter(
    (data: any) =>
      !inputinco.value ||
      data.name.toLowerCase().includes(inputinco.value.toLowerCase())
  )
);

</script>

<template>
  <div class="container-icon">
    <div>
      <h2>结合 el-icon 使用</h2>
      <p>el-icon 为 raw SVG 图标提供额外的属性</p>
      <el-icon :size="20">
        <Edit />
      </el-icon>
      <el-icon color="#409EFC" class="no-inherit">
        <Share />
      </el-icon>
      <el-icon>
        <Delete />
      </el-icon>
      <el-icon class="is-loading">
        <Loading />
      </el-icon>
      <el-button type="primary">
        <el-icon style="vertical-align: middle">
          <Search />
        </el-icon>
        <span style="vertical-align: middle"> Search </span>
      </el-button>
    </div>
    <div>
      <h2>直接使用 SVG 图标</h2>
      <div style="font-size: 20px">
        <!-- 由于SVG图标默认不携带任何属性 -->
        <!-- 你需要直接提供它们 -->
        <Edit style="width: 1em; height: 1em; margin-right: 8px" />
        <Share style="width: 1em; height: 1em; margin-right: 8px" />
        <Delete style="width: 1em; height: 1em; margin-right: 8px" />
        <Search style="width: 1em; height: 1em; margin-right: 8px" />
      </div>
    </div>
    <div>
      <h2>自带图标库</h2>
      <el-input  prefix-icon="Search" style="width: 200px;" v-model="inputinco" placeholder="Please input" > 搜索</el-input>
      <div class="icon-display">
        <div
          v-for="(icon, index) in showiconName"
          :key="index"
          class="icon-item"
          @click="copy(icon.name)"
        >
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="icon.name"
            placement="top-start"
          >
            <SvgIcon :icon-class="icon.name" size="24px" />
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container-icon {
  padding: 20px;
}
.icon-display {
  display: flex;
  flex-wrap: wrap;
}
.icon-item {
  border: 1px solid black;
  padding: 10px;
  margin: 1px;
}
.icon-item:hover {
  background-color: rgb(218, 213, 213);
  cursor: pointer;
}
</style>
